<template>
  <view class="wrapper">
    <!-- 轮播图 -->
    <u-swiper
      v-if="detail.pics"
      :list="swiperList"
      :height="498"
      @click="clickSwiper"
      :show-with-animation="true"
    ></u-swiper>
    <!-- 价格名称 -->
    <view class="info">
      <view class="price">￥{{ detail.goods_price }}</view>

      <view class="actions">
        <u-icon name="share" class="action-icon"></u-icon>
        <u-icon name="star" class="action-icon"></u-icon>
      </view>
    </view>
    <view class="title u-line-2">
      {{ detail.goods_name }}
    </view>
    <view class="divider"></view>
    <!-- 详情:方法一：用vue的语法，v-html来渲染内容 -->
    <!-- <view v-html="detail.goods_introduce"></view> -->

    <!-- 详情：方法二：用小程序开发平台的语法，rich text来渲染内容 -->
    <!-- <rich-text :nodes="detail.goods_introduce"></rich-text> -->

    <!-- 详情：方法三：用开发小程序框架u-view的语法，u-parse来渲染内容 -->
    <u-parse
      :html="detail.goods_introduce"
      :lazy-load="true"
      :show-with-animation="true"
      v-if="detail.goods_introduce"
    ></u-parse>
    <u-toast ref="uToast" />

    <!-- 订单提交栏 -->
    <SubmitBar @addCart="addCart"></SubmitBar>
  </view>
</template>

<script>
import SubmitBar from './components/SubmitBar.vue';
let params = {
  goods_id: '',
};
export default {
  components: {
    SubmitBar,
  },
  data() {
    return {
      detail: {},
    };
  },
  computed: {
    swiperList() {
      return this.detail.pics
        ? this.detail.pics.map((item) => item.pics_big)
        : [];
    },
  },
  onLoad(options) {
    params.goods_id = options.goods_id;
    this.getDetail();
  },
  methods: {
    // 获取数据
    async getDetail() {
      const { message } = await this.$u.get('/goods/detail', params);
      this.detail = message;
    },
    // 点击轮播图
    clickSwiper(index) {
      uni.previewImage({
        urls: this.swiperList,
        current: this.swiperList[index],
      });
    },
    // 加入购物车点击事件
    addCart() {
      const goodsData = {
        number: 1,
        inChecked: true,
        goods_id: this.detail.goods_id,
        goods_name: this.detail.goods_name,
        goods_price: this.detail.goods_price,
        pic: this.detail.pics[0].pics_sma_url,
      };
      this.$store.commit('cart/addGoods', goodsData);
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding-bottom: 100rpx;
}
.info {
  padding: 20rpx 34rpx;
  display: flex;
  justify-content: space-between;
  .price {
    font-size: 36rpx;
    color: red;
  }
  .actions {
    padding: 0 34rpx;
    font-size: 42rpx;
    .action-icon {
      color: #707070;
      margin-left: 40rpx;
    }
  }
}
.title {
  padding: 0 34rpx;
  font-size: 30rpx;
  color: #434343;
  line-height: 40rpx;
  height: 76rpx;
  font-weight: bold;
}
.divider {
  height: 20rpx;
  background: #f6f6f6;
  margin: 20rpx 0;
}
</style>
